<template>
  <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
          <div class="weui-cell__bd">
              <textarea class="weui-textarea" :placeholder="pholder" :rows="rows" v-model="areatext"></textarea>
              <div class="weui-textarea-counter"><span>{{inputlength}}</span>/{{allowlength}}</div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'MyTextarea',
  props: {
    allowlength: {
      type: Number,
      default: 20
    },
    rows: {
      type: Number,
      default: 2
    },
    pholder: {
      type: String,
      default: '请输入文本'
    },
    stext: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      inputlength: 0,
      areatext: this.stext
    }
  },
  watch: {
    areatext () {
      if (this.areatext.length > this.allowlength) this.areatext = this.areatext.substr(0, this.allowlength)
      this.inputlength = this.areatext.length
      this.$emit('areatextchg', this.areatext)
    }
  },
  methods: {
    cleardata () {
      this.areatext = ''
    },
    setdata (text) {
      this.areatext = text
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>
